<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区域-->
    <el-card class="box-card">
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddDialog">添加分类</el-button>
        </el-col>
      </el-row>

      <!--表格数据区域-->
      <zk-table :data="categoryList"
                :columns="columns"
                :selection-type="false"
                :expand-type="false"
                :show-index="true"
                index-text="序号索引" border stripe>
        <!--是否有效模板-->
        <template slot="isok" scope="scope">
          <!--{{ scope.row.likes.join(',') }}-->
          <i class="el-icon-success" v-if="scope.row.catDeleted == 0" style="color: lightgreen"></i>
          <i class="el-icon-error" v-else style="color: red"></i>
        </template>
        <!--排序模板-->
        <template slot="order" scope="scope">
          <!--{{ scope.row.likes.join(',') }}-->
          <el-tag type="primary" size="mini" v-if="scope.row.catLevel == 0">一级</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.catLevel == 1">二级</el-tag>
          <el-tag type="warning" size="mini" v-else>三级</el-tag>
        </template>
        <!--操作模板-->
        <template slot="opt" scope="scope">
          <!--{{ scope.row.likes.join(',') }}-->
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="showDelete(scope.row)">删除</el-button>
        </template>
      </zk-table>
      <!--分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageIndex"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!--添加分类对话框-->
    <el-dialog
      title="添加分类"
      :visible.sync="addCategoryDialog"
      width="50%" @close="addDialogClose">
      <el-form ref="addCateFormRef" :model="addCateForm" label-width="100px" :rules="addCateFormRules">
        <el-form-item label="分类名称：" prop="catName">
          <el-input v-model="addCateForm.catName"></el-input>
        </el-form-item>
        <el-form-item label="父级分类：">
          <el-cascader
            v-model="addCategoryValue"
            :options="parentChildrenList"
            :props="cascaderProps"
            @change="getChangeCategory" clearable>
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addCategoryDialog = false">取 消</el-button>
    <el-button type="primary" @click="addCategoryButton">确 定</el-button>
  </span>
    </el-dialog>
    <!--编辑对话框-->
    <el-dialog
      title="编辑分类名称"
      :visible.sync="editDialogVisible"
      width="50%" @close="editDialogClose">
      <el-form ref="editFormRef" :model="editForm" label-width="100px" :rules="editFormRules">
        <el-form-item label="分类名称：" prop="catName">
          <el-input v-model="editForm.catName" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCategoryButton">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "Cate",
        data(){
          return{
            //商品分类列表数据保存
            categoryList:[],
            //添加分类对话框显示和隐藏属性
            addCategoryDialog:false,
            addCateForm:{
              catName:'',
              catPid:0,
              catLevel:0
            },
            addCateFormRules:{
              catName:[{required:true,message:'请输入分类名称',trigger:'blur'}]
            },
            //查询条件
            queryInfo:{
              pageIndex:1,
              pageSize:5
            },
            //总条数
            total:0,
            //指定树形table列
            columns:[
              {
                label: '分类名称',
                prop: 'catName'
              },
              {
                label: '是否有效',
                type: 'template',
                template: 'isok',
              },
              {
                label: '排序',
                type: 'template',
                template: 'order',
              },
              {
                label: '操作',
                type: 'template',
                template: 'opt',
              },
            ],
            parentChildrenList:[],
            cascaderProps:{
              value: 'catId',
              label: 'catName',
              children:'children',
              //指定是悬浮还是惦记属性
              expandTrigger:'hover',
              checkStrictly:true
            },
            addCategoryValue:[],
            //编辑对话框隐藏和显示
            editDialogVisible:false,
            editForm:{},
            editFormRules: {
              catName: [{required: true, message: '请输入分类名称', trigger: 'blur'}]
            }

          }
        },
      created() {
          this.getCategoryList();
      },
      methods:{
        //获取列表数据事件
        async getCategoryList(){
           const {data:res} = await this.$axios.get("category",{params:this.queryInfo});
           //console.log(res);
           this.categoryList = res.data.resultList;
           this.total = res.data.total;
        },
        //监听pageSize变化
        handleSizeChange(val){
          this.queryInfo.pageSize = val;
          this.getCategoryList();
        },
        handleCurrentChange(val){
          this.queryInfo.pageIndex = val;
          this.getCategoryList();
        },
        showAddDialog(){
          this.getParentChildrenData();
          this.addCategoryDialog = true;
        },
        //获取分类名称下拉框事件
        async getParentChildrenData() {
           const {data:res} = await this.$axios.get("category/two");
           if(res.code != 200) {
              return this.$message.error("获取数据失败");
           }
           this.parentChildrenList = res.data.resultList;
           //console.log(this.parentChildrenList);
           this.$message.success("获取数据成功");
        },
        //监听分类名称下拉框事件
        getChangeCategory(){
            if(this.addCategoryValue.length > 0){
              //父级分类id
              this.addCateForm.catPid = this.addCategoryValue[this.addCategoryValue.length - 1];
              //等级
              this.addCateForm.catLevel = this.addCategoryValue.length;
              return;
            } else {
              this.addCateForm.catPid = 0;
              this.addCateForm.catLevel = 0
            }
          //console.log(this.addCateForm.catPid+"==="+this.addCateForm.catLevel);
        },
        //监听添加分类提交按钮事件
        addCategoryButton(){
          //console.log(this.addCateForm)
          this.$refs.addCateFormRef.validate(async valid=>{
            if(!valid) return ;
            const {data:res} = await this.$axios.post("add/category",this.addCateForm);
            if(res.code != 200) {
              return this.$message.error("添加分类失败")
            }
            this.$message.success("添加分类成功");
            this.getCategoryList();
            this.addCategoryDialog = false;
          })

        },
        //监听添加分类对话框关闭事件，重置表单
        addDialogClose(){
          this.$refs.addCateFormRef.resetFields();
          this.addCategoryValue = [];
          this.addCateForm.catLevel = 0;
          this.addCateForm.catPid = 0;
        },
        //编辑对话框显示
        showEditDialog(row){
          //console.log(row);
          this.editForm = row;
          this.editDialogVisible = true;
        },
        editDialogClose() {
          this.editForm = {};
          this.$refs.editFormRef.resetFields();
        },
        //编辑按钮提交事件
        editCategoryButton() {
          this.$refs.editFormRef.validate(async valid=>{
            if(!valid) return;
              const {data:res} = await this.$axios.put("edit/category/"+this.editForm.catId,'catName='+this.editForm.catName)
              if(res.code !=200) {
                return this.$message.error("编辑分类失败");
              }
              this.$message.success("编辑分类成功");
              this.getCategoryList();
              this.editDialogVisible = false;
          })
        },
        //删除分类
        async showDelete(row){
          const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err=>err);
          if(confirmResult != 'confirm') {
            return this.$message.info("已取消操作");
          }
          const {data:res} = await this.$axios.get("delete/category/"+row.catId);
          if(res.code != 200) {
            return this.$message.error("删除分类失败");
          }
          this.getCategoryList();
        }
      }

    }
</script>

<style scoped>
.el-card{
  margin-top: 15px;
}
  .zk-table{
    margin-top: 15px;
  }
  .el-cascader{
    width: 100%;
  }
</style>
